<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>后台管理-登陆</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta http-equiv="Access-Control-Allow-Origin" content="*" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, maximum-scale=1"
    />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="format-detection" content="telephone=no" />
    <link
      rel="stylesheet"
      href="../lib/layui-v2.5.5/css/layui.css"
      media="all"
    />
    <!--[if lt IE 9]>
      <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
      <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
    <style>
      html,
      body {
        width: 100%;
        height: 100%;
        overflow: hidden;
      }
      body {
        background: #009688;
      }
      body:after {
        content: "";
        background-repeat: no-repeat;
        background-size: cover;
        -webkit-filter: blur(3px);
        -moz-filter: blur(3px);
        -o-filter: blur(3px);
        -ms-filter: blur(3px);
        filter: blur(3px);
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: -1;
      }
      .layui-container {
        width: 100%;
        height: 100%;
        overflow: hidden;
      }
      .admin-login-background {
        width: 360px;
        height: 300px;
        position: absolute;
        left: 50%;
        top: 40%;
        margin-left: -180px;
        margin-top: -100px;
      }
      .logo-title {
        text-align: center;
        letter-spacing: 2px;
        padding: 14px 0;
      }
      .logo-title h1 {
        color: #009688;
        font-size: 25px;
        font-weight: bold;
      }
      .login-form {
        background-color: #fff;
        border: 1px solid #fff;
        border-radius: 3px;
        padding: 14px 20px;
        box-shadow: 0 0 8px #eeeeee;
      }
      .login-form .layui-form-item {
        position: relative;
      }
      .login-form .layui-form-item label {
        position: absolute;
        left: 1px;
        top: 1px;
        width: 38px;
        line-height: 36px;
        text-align: center;
        color: #d2d2d2;
      }
      .login-form .layui-form-item input {
        padding-left: 36px;
      }
      .captcha {
        width: 39%;
        display: inline-block;
      }
      .captcha-img {
        display: inline-block;
        width: 29%;
        cursor: pointer;
      }
      .captcha-img img {
        height: 34px;
        border: 1px solid #e6e6e6;
        height: 36px;
        width: 100%;
      }
    </style>
  </head>
  <body>
    <div class="layui-container">
      <div class="layui-tab layui-tab-brief admin-login-background">
        <ul class="layui-tab-title">
          <li class="layui-this">账号登录</li>
          <li>手机登录</li>
        </ul>
        <div class="layui-tab-content">
          <!-- 账号登录 -->
          <div class="layui-tab-item layui-show">
            <div class="layui-form login-form">
              <form class="layui-form" action="">
                <div class="layui-form-item logo-title">
                  <h1>dyl-后台登录</h1>
                </div>
                <div class="layui-form-item">
                  <label class="layui-icon layui-icon-username" for="username"></label>
                  <input type="text" name="username" lay-verify="required|account" placeholder="用户名或者邮箱" autocomplete="off" class="layui-input" value="admin" />
                </div>
                <div class="layui-form-item">
                  <label class="layui-icon layui-icon-password" for="password"></label>
                  <input type="password" name="password" lay-verify="required|password" placeholder="密码" autocomplete="off" class="layui-input" value="123456" />
                </div>
                <div class="layui-form-item">
                  <label class="layui-icon layui-icon-vercode" for="captcha"></label>
                  <input type="text" name="code" lay-verify="required|captcha" placeholder="图形验证码" autocomplete="off" class="layui-input verification captcha" value="" />
                  <div class="captcha-img">
                    <img id="captchaPic" src="" />
                  </div>
                </div>
                <div class="layui-form-item">
                  <div class="captcha-img">
                    <input type="hidden" name="uuid" id="uuid" />
                  </div>
                </div>
                <div class="layui-form-item">
                  <button class="layui-btn layui-btn-fluid" lay-submit="" lay-filter="login">登 入</button>
                </div>
              </form>
            </div>
          </div>
          <!-- 手机登录 -->
          <div class="layui-tab-item">
            <div class="layui-form login-form">
              <form class="layui-form" action="">
                <div class="layui-form-item logo-title">
                  <h1>dyl-手机登录</h1>
                </div>
                <div class="layui-form-item">
                  <label class="layui-icon layui-icon-cellphone" for="phone"></label>
                  <input type="tel" name="phone" lay-verify="required|phone" placeholder="手机号" autocomplete="off" class="layui-input" value="" />
                </div>
              
                <div class="layui-form-item verify-code">
                  <label class="layui-icon layui-icon-vercode" for="codes"></label>
                  <input type="text" name="codes" lay-verify="required|number" placeholder="短信验证码" autocomplete="off" class="layui-input verification captcha" value="" />
                  <div class="captcha-img">
                    <button type="button" id="send-code-btn"  class="layui-btn layui-btn-sm layui-btn-normal send-code-btn">发送验证码</button>
                  </div>
                </div>

                <div class="layui-form-item">
                  <button class="layui-btn layui-btn-fluid" lay-submit="" lay-filter="phoneLogin">登 入</button>
                </div>
              </form>
            </div>
          </div>
        </div>
      </div>
    </div>
    
    <script
      src="../lib/jquery-3.4.1/jquery-3.4.1.min.js"
      charset="utf-8"
    ></script>
    <script src="../lib/layui-v2.5.5/layui.js" charset="utf-8"></script>
    <script
      src="../lib/jq-module/jquery.particleground.min.js"
      charset="utf-8"
    ></script>
    <script src="../api/baseApi.js" charset="utf-8"></script>
    <script src="../api/loginAndLogoutApi.js" charset="utf-8"></script>
    <script src="../js/request.js"></script>
    <script>

        // 设置倒计时初始值
  let countDownSeconds = 0;
      layui.use(["form",'element'], function () {
        var form = layui.form,
          layer = layui.layer,
          element = layui.element,
          t = Math.random(),
          $ = layui.jquery;
          element.render();
           // 获取token
        const token = localStorage.getItem('token');
        //ajax全局参数设置
        $.ajaxSetup({
            headers:{
                Authorization: 'Bearer '+token
            },
            // 发送cookie
            xhrFields: {
                withCredentials: true
            }
        });
        //如果是登陆状态直接登录
        function getUser(){
        ajaxRequest(getUserInfo, "GET", null, onSuccess);
          function onSuccess(res) {
            if(res.code==0){
                window.location = "../index.html";
            }
          }
        }

        

        // 获取验证码
        function getCode() {
         
          ajaxRequest(
            genCaptchaUrl + "?t= " + Math.random(),
            "GET",
            null,
            onSuccess
          );

          function onSuccess(res) {
            $("#captchaPic")[0].src = "data:image/gif;base64," + res.img;
            $("#uuid").val(res.uuid);
        
          }
        }

       

        //更换验证码(账号密码)
        $("#captchaPic").on("click", function () {
          getCode();
        });
       

        // 登录过期的时候，跳出ifram框架
        if (top.location != self.location) top.location = self.location;

        // 粒子线条背景
        $(document).ready(function () {
          $(".layui-container").particleground({
            dotColor: "#5cbdaa",
            lineColor: "#5cbdaa",
          });
          getUser();
          getCode();
          
          
        });

   

        // 进行登录操作(账号密码登录)
        form.on("submit(login)", function (data) {
          let loadIndex = layer.load(2, {
            shade: [0.3, "#333"],
          });

          ajaxRequest(loginUrl, "POST", JSON.stringify(data.field), onSuccess);

          function onSuccess(res) {
            layer.close(loadIndex);
            if (res.code == 200) {
              localStorage.setItem("token", res.data.access_token);
              layer.msg(
                res.message,
                function (index) {
                  window.location = "../index.html"; 
                },
                5000
              );
            } else {
              layer.msg(res.message);
              $("#captchaPic").click();
            }
          }
          return false;
        });

     //手机登录
     //发送手机验证码

     // 获取发送验证码按钮的 DOM 元素
const sendCodeBtn = $('#send-code-btn');
// 获取手机号输入框的 DOM 元素
const phoneInput = $('input[name="phone"]');

// 点击按钮后开始倒计时
sendCodeBtn.on('click', function() {
    // 获取手机号码
    const phone = phoneInput.val();

// 如果手机号码格式不正确，则弹出错误提示并返回
if (!/^1\d{10}$/.test(phone)) {
  layer.msg('请输入正确的手机号码');
  return;
}

  $.post({
      url:sendSmsPhone,
      data: {
        "phone": phone
      },
      dataType: "json",
      timeout:300000,
      xhrFields:{withCredentials: true},
      success: function (res) {
        console.log(res);
        if(res.code==0){
          localStorage.setItem("codeUuid", phone);
          layer.msg("发送成功");
          sendSmsPhoness();
        }else{
          layer.msg(res.message);
        }
      }
    });

   
    
  
});


//获取验证时间
sendSmsPhoness()
function sendSmsPhoness (){
  const codeUuid =  localStorage.getItem("codeUuid")
        $.post({
              url:sendSmsPhones,
              data: {
                "codeuuid": codeUuid
              },
              dataType: "json",
              timeout:300000,
              xhrFields:{withCredentials: true},
              success: function (res) {
                console.log(res);
                if(res.code==200){
                  countDownSeconds=res.result.codeTime
                  btnTime();
                }
              }
            });

}

function btnTime(){
  // 禁用按钮
  sendCodeBtn.prop('disabled', true);



  // 更新按钮文本和样式
  sendCodeBtn.addClass('layui-btn-disabled');
  sendCodeBtn.text(`${countDownSeconds} 秒后重试`);

  // 创建计时器并开始倒计时
  const timer = setInterval(() => {
    // 每秒钟更新计时器的值
    countDownSeconds--;

    // 更新按钮文本和样式
    sendCodeBtn.text(`${countDownSeconds} 秒后重试`);

    // 如果倒计时结束，则停止计时器并启用按钮
    if (countDownSeconds <= 0) {
      clearInterval(timer);
      sendCodeBtn.prop('disabled', false);
      sendCodeBtn.removeClass('layui-btn-disabled');
      sendCodeBtn.text('发送验证码');
    }
  }, 1000);

}

// 进行登录操作(手机验证码登录)
form.on("submit(phoneLogin)", function (data) {
  console.log(data);
  let loadIndex = layer.load(2, {
            shade: [0.3, "#333"],
          });

  ajaxRequest(loginCode, "POST", JSON.stringify(data.field), onSuccess);

function onSuccess(res) {
  layer.close(loadIndex);
            if (res.code == 200) {
              localStorage.setItem("token", res.data.access_token);
              layer.msg(
                res.message,
                function (index) {
                  window.location = "../index.html";
                },
                5000
              );
            } else {
              layer.msg(res.message);
              $("#captchaPic").click();
            }
          }
          return false;

  
})




        
});

    
    </script>
  </body>
</html>
